<template>
  <!-- <div>清关</div> -->
  <VTable ref="tableRef" v-bind="tableOptins">
    <template #form="{ form }">
      <XForm :fieldList="fieldList" :formOption="optionsData" :formData="form">
        <template #create_user="{ value, input }">
          <VCascader
            :model-value="value"
            @update:model-value="input"
            collapse-tags
            class="w-[200px]"
            placeholder="登记人"
          />
        </template>
        <template #logistics_charge_weight="{ input, value }">
          <NumberRangeSea
            :model-value="value"
            @update:model-value="input"
            placeholder="物流商计费重"
            checkValue
          />
        </template>
      </XForm>
    </template>
    <template #toolbar_btns>
      <VActionBar :actions="actions" />
    </template>
    <template #operation="{ row }">
      <el-button
        link
        type="primary"
        @click="handleEdit(row.id)"
        v-hasPermi="[exportRebatesAuthList.forecast_clearance.eidt]"
      >
        修改
      </el-button>
      <el-button link type="primary" @click="handleLog(row)"> 日志 </el-button>
    </template>
  </VTable>
  <BatchUpdate
    v-model="updateVisible"
    :id="updateId"
    @close="updateId = null"
    @refresh="refresh"
  />
  <Import-dialog ref="importDialogRef" @refresh="refresh" />
  <SpecialLog
    dialog
    v-model="logVisible"
    :autoLoad="false"
    tag="TAG_CLS_INVOICE_REGISTER"
    :business_id="logId"
    @close="logId = ''"
  />
  <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import XForm from "@/components/XForm/index.vue";
import BatchUpdate from "../BatchUpdate/index";
import ImportDialog from "@/components/importDialog/index.vue";
import { invoiceRegisterList } from "../../api.js";
import SpecialLog from "@/components/SpecialLog/index.vue";
import DerivedCenter from "@/components/DerivedCenter/index.vue";
import { getTableSelectRow } from "@/hooks/tool.js";
import { config_name } from "@/config/export.js";
import { exportRebatesAuthList } from "@/Auth/export-rebates.js";
import NumberRangeSea from "@/components/NumberRangeSea/index.vue";
const props = defineProps({
  optionsData: { type: Object, default: () => {} },
});
const { optionsData } = toRefs(props);
const tableRef = ref();
const refresh = () => {
  tableRef?.value.$table.commitProxy("query");
};
const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  rowConfig: {
    height: 90,
  },
  tooltipConfig: {
    showAll: false,
  },
  isToggle: true,
  columns: [
    { fixed: "left", width: 50, type: "checkbox" },
    {
      title: "基本信息",
      width: 260,
      field: "dept",
      slots: {
        default: ({ row }) => (
          <div>
            <VText title="事业部" value={row?.dept} />
            <VText title="物流提货日期" value={row?.delivery_take_time} />
            <VText title="登记人" value={row?.register_user} />
          </div>
        ),
      },
    },
    // { title: "物流提货日期", width: 160, field: "delivery_take_time" },
    {
      title: "单号信息",
      width: 300,
      field: "fba_ids_str",
      slots: {
        default: ({ row }) => (
          <div>
            <VText title="配货单号/FBA单号" value={row?.fba_ids_str} copy />
            <VText title="物流商单号" value={row?.track_no} copy />
          </div>
        ),
      },
    },
    // { title: "物流商单号", width: 200, field: "track_no" },
    {
      title: "供应商信息",
      width: 360,
      slots: {
        default: ({ row }) => (
          <div>
            <VText title="发货类型" value={row?.shipment_type_text} />
            <VText title="供应商地址" value={row?.supplier_address} line={2} />
          </div>
        ),
      },
    },
    // { title: "供应商地址", width: 260, field: "supplier_address" },
    {
      title: "仓库信息",
      width: 260,
      field: "delivery_warehouse",
      slots: {
        default: ({ row }) => (
          <div>
            <VText title="发货仓库" value={row?.delivery_warehouse} />
            <VText title="目的仓" value={row?.dest_warehouse_name} />
            <VText title="进口国" value={row?.importing_country} />
          </div>
        ),
      },
    },
    // { title: "进口国", width: 100, field: "importing_country" },
    // { title: "目的仓", width: 160, field: "dest_warehouse_name" },
    // { title: "登记人", width: 160, field: "register_user" },
    {
      title: "物流商信息",
      width: 300,
      field: "logistics_name",
      slots: {
        default: ({ row }) => (
          <div>
            <VText title="物流商" value={row?.logistics_name} />
            <VText title="运输方式" value={row?.transport_type_text} />
          </div>
        ),
      },
    },
    // { title: "运输方式", width: 100, field: "transport_type_text" },
    {
      title: "包税",
      width: 200,
      field: "has_tax",
      slots: {
        default: ({ row }) => (
          <div>
            <VText title="是否包税" value={row?.has_tax} />
            <VText title="税号" value={row?.tax_no} />
          </div>
        ),
      },
    },
    // { title: "税号", width: 160, field: "tax_no" },
    {
      title: "申报信息",
      width: 180,
      field: "declared_amount",
      slots: {
        default: ({ row }) => (
          <div>
            <VText title="申报金额" value={row?.declared_amount} />
            <VText title="申报币种" value={row?.declared_currency} />
          </div>
        ),
      },
    },
    // { title: "申报币种", width: 160, field: "declared_currency" },
    {
      title: "渠道",
      width: 200,
      field: "channel_name",
      slots: {
        default: ({ row }) => (
          <div>
            <VText title="确认渠道" value={row?.channel_name} />
            <VText
              title="渠道计费类型"
              value={row?.channel_billing_type_text}
            />
          </div>
        ),
      },
    },
    {
      title: "订单信息",
      width: 160,
      field: "order_count",
      slots: {
        default: ({ row }) => (
          <div>
            <VText title="订单票数" value={row?.order_count} />
            <VText title="箱数" value={row?.box_count} />
          </div>
        ),
      },
    },
    // { title: "箱数", width: 160, field: "box_count" },
    {
      title: "仓库重量",
      width: 160,
      field: "real_weight",
      slots: {
        default: ({ row }) => (
          <div>
            <VText title="仓库实重" value={row?.real_weight} />
            <VText title="仓库最大重" value={row?.max_weight} />
            <VText title="仓库体积" value={row?.volume} />
            <VText title="仓库计费重(KG)" value={row?.charge_weight} />
          </div>
        ),
      },
    },
    // { title: "仓库最大重", width: 160, field: "max_weight" },
    // { title: "仓库体积", width: 160, field: "volume" },
    // { title: "仓库计费重", width: 160, field: "charge_weight" },
    { title: "物流商计费重(KG)", width: 160, field: "logistics_charge_weight" },
    { title: "是否复核", width: 100, field: "is_recheck_text" },
    { title: "备注", width: 200, field: "register_remark" },
    // { title: "单价", width: 160, field: "price" },
    // { title: "运费", width: 160, field: "freight" },
    // { title: "国内运费", width: 160, field: "domestic_freight" },
    // { title: "报关费", width: 160, field: "customs_clearance_freight" },
    // { title: "续页费", width: 160, field: "renewal_freight" },
    // { title: "清关费", width: 160, field: "clearance_freight" },
    // { title: "超品名", width: 160, field: "superbrand" },
    // { title: "税金", width: 160, field: "tax_freight" },
    // { title: "附加费", width: 160, field: "additional_freight" },
    // { title: "杂费", width: 160, field: "incidental_freight" },
    // { title: "开票税额", width: 160, field: "invoice_tax" },
    // { title: "查验费", width: 160, field: "inspection_freight" },
    // { title: "运费赔偿,时效,丢件", width: 160, field: "freight_indemnity" },
    // {
    //   title: "应付物流总金额RMB",
    //   width: 160,
    //   field: "logistics_total_amount_cny",
    // },
    {
      title: "操作",
      width: 120,
      field: "",
      fixed: "right",
      slots: { default: "operation" },
    },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        return invoiceRegisterList({ ...form, ...page }).then((res) => {
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});
//批量修改
const updateVisible = ref(false);
const updateId = ref();
// const handlebatchUpdate = () => {
//   updateVisible.value = true;
// };
const handleEdit = (val) => {
  updateVisible.value = true;
  updateId.value = val;
};
//导入
const importDialogRef = ref();
const handleImport = () => {
  importDialogRef.value?.open({
    type: "sys.importClsInvoicesRegister",
    urlType: "/receipt/cls-invoice-register/import",
  });
};
//导出
//导出中心
const DerivedCenterRef = ref();
const handleExport = async () => {
  let condition = getTableSelectRow(tableRef.value);
  DerivedCenterRef.value.open({
    tag_name: config_name["export_rebates"]["cls_invoices_register_info"],
    condition,
  });
};
//日志
const logId = ref("");
const logVisible = ref(false);
const handleLog = (item) => {
  logId.value = item.id;
  logVisible.value = true;
};
const actions = [
  // {
  //   label: "批量修改",
  //   icon: "add2",
  //   type: "primary",
  //   fn: handlebatchUpdate,
  // },
  {
    label: "导入",
    right: true,
    dkicon: "icon-Download",
    fn: handleImport,
    permission: [exportRebatesAuthList.forecast_clearance.cl_import],
  },
  {
    label: "导出",
    right: true,
    dkicon: "icon-Upload",
    fn: handleExport,
    permission: [exportRebatesAuthList.forecast_clearance.cls_export],
  },
];

const publicStyle = { style: { width: "240px" } };
const fieldList = [
  {
    field: "tc_dc_type",
    type: "select",
    class: "select-wrapper-style",
    originOption: "cls_invoice_register_department",
    ...publicStyle,
    collapseTags: true,
    multiple: true,
    options: {
      placeholder: "事业部",
    },
  },
  {
    field: "numberNo",
    placeholder: "请输入",
    type: "input",
    select: [
      { label: "FBAID", value: "fba_ids" },
      { label: "配货单号", value: "ph_number" },
      { label: "物流商单号", value: "track_no" },
    ],
    selectStyle: { width: "120px" },
  },
  {
    field: "shipment_type",
    type: "select",
    originOption: "cls_invoice_shipment_type",
    ...publicStyle,
    class: "select-wrapper-style",
    collapseTags: true,
    multiple: true,
    options: {
      placeholder: "发货类型",
    },
  },
  {
    field: "ship_warehouse_id",
    type: "select",
    class: "select-wrapper-style",
    originOption: "warehouse",
    ...publicStyle,
    collapseTags: true,
    multiple: true,
    options: {
      placeholder: "发货仓库",
    },
  },
  {
    field: "dest_country_code",
    type: "select",
    class: "select-wrapper-style",
    originOption: "country",
    ...publicStyle,
    collapseTags: true,
    multiple: true,
    options: {
      placeholder: "出口国家",
    },
  },
  {
    field: "dest_warehouse_id",
    type: "select",
    class: "select-wrapper-style",
    originOption: "warehouse",
    ...publicStyle,
    collapseTags: true,
    multiple: true,
    options: {
      placeholder: "目的仓",
    },
  },
  {
    field: "user",
    slot: "create_user",
  },
  {
    field: "logistics_id",
    type: "select",
    originOption: "logisticsList",
    ...publicStyle,
    collapseTags: true,
    multiple: true,
    class: "select-wrapper-style",
    options: {
      placeholder: "物流商",
      labelKey: "logistics_name",
      valueKey: "id",
    },
  },

  {
    field: "channel_id",
    type: "select",
    originOption: "cls_invoice_register_channel",
    ...publicStyle,
    collapseTags: true,
    multiple: true,
    class: "select-wrapper-style",
    options: {
      placeholder: "确认渠道",
    },
  },
  {
    field: "transport_type",
    type: "select",
    class: "select-wrapper-style",
    collapseTags: true,
    multiple: true,
    originOption: "transport_type",
    ...publicStyle,
    options: {
      placeholder: "运输方式",
    },
  },
  {
    field: "has_tax",
    type: "select",
    class: "select-wrapper-style",
    collapseTags: true,
    multiple: true,
    originOption: "has_tax",
    ...publicStyle,
    options: {
      placeholder: "是否包税",
    },
  },
  {
    field: "logistics_charge_weight",
    slot: "logistics_charge_weight",
  },
];
</script>
<style lang="scss" scoped>
.vx-table {
  height: calc(100% - 40px) !important;
}
</style>
